<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <Crumbs></Crumbs>
      </el-col>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="detail_wrap">
      <div class="tit">
        <h2>商品信息</h2>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">商品ID：</label>
            <span>{{goodsData.skuId}}</span>
          </li>
          <li>
            <label class="label">商品名称：</label>
            <span>{{goodsData.goodsName}}</span>
          </li>
          <li>
            <label class="label">项目类型：</label>
            <span>{{goodsData.classOneName}}</span>
          </li>
          <li>
            <label class="label">所属医院：</label>
            <span>{{goodsData.institutionName}}</span>
          </li>
          <li>
            <label class="label">产品相册：</label>
            <span>
              <img  v-show="goodsData.goodsImageOneUrl" @click="$imageViewer" :src="goodsData.goodsImageOneUrl">
              <img  v-show="goodsData.goodsImageTwoUrl" @click="$imageViewer" :src="goodsData.goodsImageTwoUrl">
              <img  v-show="goodsData.goodsImageThreeUrl" @click="$imageViewer" :src="goodsData.goodsImageThreeUrl">
              <img  v-show="goodsData.goodsImageFourUrl" @click="$imageViewer" :src="goodsData.goodsImageFourUrl">
            </span>
          </li>
          <li>
            <label class="label">限购数量：</label>
            <span>{{goodsData.mostNum}}</span>
          </li>
          <li>
            <label class="label">库存：</label>
            <span>{{goodsData.surplusNum}}</span>
          </li>
          <li>
            <label class="label">销量：</label>
            <span>{{goodsData.sellNum}}</span>
          </li>
          <li>
            <label class="label">价格：</label>
            <span>￥{{goodsData.retailPrice}} ~ ￥{{goodsData.platformPrice}}</span>
          </li>
          <li>
            <label class="label">详情预览：</label>
            <!--<iframe class="phone_bg" :src="detailUrl"></iframe>-->
            <div v-html="goodsDetail.goodsDetails"></div>
          </li>
        </ul>
      </div>

      <div class="tit">
        <h2>审核</h2>
      </div>
      <div class="audit_box">
        <el-form :model="goodsAuditForm" ref="goodsAuditForm" label-width="200px" :rules="roleRules">
          <el-row>
            <el-form-item label="审核原因" prop="approveRemark" style="margin-top:30px;">
              <el-input type="textarea" v-model="goodsAuditForm.approveRemark"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <el-button @click="returnList">取 消</el-button>
              <el-button type="primary" @click="sureAuditClick(1)">通过</el-button>
              <el-button type="primary" @click="sureAuditClick(-1)">不通过</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
  import Crumbs from "@/components/Crumbs";
  import { FORMAT_DATE_YYYY_MM_DD } from "@/constants/constants";
  import * as message from '@/constants/message'
  // import { mapGetters, mapActions } from 'vuex'
  export default {
    data() {
      return {
        goodsData: "",
        // detailUrl: "http://h.vvhuimei.com/goods_detail.html?type=1&goodsId=" + this.$route.query.id
        detailUrl: "http://h.vvhuimei.com/goods_detail.html?type=1&goodsId=" + this.$route.query.id,
        goodsDetail: '',
        goodsAuditForm:{
          approveRemark:""
        },
        roleRules: {
          approveRemark: [
            {required: true, message: "请输入审核原因", trigger: "blur"}
          ]
        }
      };
    },
    components: {
      Crumbs,
    },
    computed: {
      //      medicalLicenceValidityDate(){
      //        return this.formatDate(goodsData.medicalLicenceValidity);
      //      }
    },
    methods: {
      getData() {
        this.$Get(this.$Config.api.goods, {
          goodsId: this.$route.query.id
        }).then(res => {
          this.goodsData = res.data;
        });
      },
      getDetail () {
        this.$Get(this.$Config.api.goodsDetail, {
          goodsId: this.$route.query.id
        }).then(res => {
          if (res.data != null) {
            this.goodsDetail = res.data
            let value = this.goodsDetail.goodsDetails.replace(/&amp;/g,"&");
            value = value.replace(/&lt;/g,"<");
            value = value.replace(/&gt;/g,">");
            value = value.replace(/&nbsp;/g," ");
            value = value.replace(/&quot;/g,"'");
            this.goodsDetail.goodsDetails = value;
            console.log("----->" + this.goodsDetail.goodsDetails)
          }
        })
      },
      sureAuditClick(approveStateVal){
        this.$refs.goodsAuditForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                this.auditGoods(approveStateVal);
              });
          }
        })
      },
      auditGoods(approveStateVal) {
        let goodsData = {
          goodsId: this.$route.query.id,
          approveState: approveStateVal,
          approveRemark: this.goodsAuditForm.approveRemark
        };
        this.$Put(this.$Config.api.goodsAudit, goodsData)
          .then(data => {
            this.$message({
              type: 'success',
              message: message.MSG_ACTION_SUCCESS
            });
            this.returnList();
          })
          .catch(error => {
            if (error.msg) {
              this.$message.error(message.MSG_ACTION_FAIL);
            }
          })
      },
      formatDate(value) {
        return this.$Utils.formatDate(value, "yyyy-MM-dd");
      },
      returnList() {
        this.$router.push({path: '/good/goodManagement'});
      }
    },

    mounted() {
      this.getData();
      this.getDetail();
    }
  };
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
